import React, { Component } from 'react'
import Header from './components/Header'
import Section from './components/Section'
import Footer from './components/Footer'
import './index.css'

class App extends Component {
  state = {
    list: [
      {
        id: 99,
        title: 'javavvvvvvvvvv',
        checked: false,
      },
      {
        id: 100,
        title: 'java6666666666',
        checked: false,
      },
      {
        id: 101,
        title: 'java8888888888',
        checked: false,
      },
    ],
    value: '',
  }
  onChange = (e) => {
    this.setState({
      value: e.target.value,
    })
  }
  onKeyUp = (e) => {
    if (e.keyCode === 13) {
      const { list } = this.state
      const LIST = {
        id: Math.random(),
        title: this.state.value,
        checked: false,
      }
      this.setState({
        list: [...list, LIST],
      })
    }
  }
  onDelete = (id) => {
    const { list } = this.state
    this.setState({
      list: list.filter((item) => item.id !== id),
    })
  }
  render() {
    const { list, value } = this.state
    return (
      <section className="todoapp">
        <Header value={value} onChange={this.onChange} onKeyUp={this.onKeyUp} />
        <Section list={list} onDelete={this.onDelete} />
        <Footer />
      </section>
    )
  }
}

export default App
